{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史天气对比</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 100%;
            height: 400px;
            margin: 20px 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>历史天气数据</h1>
    
    <!-- 图表容器 -->
    <div id="temperature-chart" class="chart-container"></div>
    
    <!-- 数据表格 -->
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>天气状况(白天/夜间)</th>
                <th>最高气温/最低气温</th>
                <th>风力风向(白天)</th>
                <th>风力风向(夜间)</th>
            </tr>
        </thead>
        <tbody>
            {% for data in weather_data %}
            <tr>
                <td>{{ data.date|date:"Y年m月d日" }}</td>
                <td>{{ data.day_weather }} / {{ data.night_weather }}</td>
                <td>{{ data.max_temperature }}℃ / {{ data.min_temperature }}℃</td>
                <td>{{ data.day_wind_direction }} {{ data.day_wind_power }}</td>
                <td>{{ data.night_wind_direction }} {{ data.night_wind_power }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <script>
        // 初始化图表
        var chartDom = document.getElementById('temperature-chart');
        var myChart = echarts.init(chartDom);

        // 获取图表数据
        fetch('/temperature-chart/')
            .then(response => response.json())
            .then(data => {
                myChart.setOption(JSON.parse(data.chart_data));
            });

        // 响应窗口调整大小
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>
